<template>
  <div class="padding-b150">
    <!-- 搜索头部 -->
    <section class="sea_top bgfff">
      <a href="javascript:history.go(-1)">
        <van-icon name="arrow-left" size="0.4rem" color="#666666" />
      </a>
      <p class="text-cut-one">
        <a href="/search/search">
          以下为“
          <span>{{ searchTit }}</span>”检索结果
        </a>
      </p>
    </section>
    <!-- 推荐列表 -->
    <recommendList v-if="recommendList.length > 0" :recommendList="recommendList"></recommendList>
    <!-- tab切换 -->
    <div ref="tabList">
      <tab :tabList="tabList" :tabIndex="tabIndex" @tabChange="getList" class="margin-t20"></tab>
      <!-- 企业名片 -->
      <ul class="tab_list" v-show="tabIndex == 0">
        <div
          class="list_li border-bottom flex justify-between"
          v-for="(item,index) in list"
          :key="index"
          @click="to('/card/', item.id)"
        >
          <img class="margin-r24" v-if="item.logo" :src="item.logo" alt />
          <img class="margin-r24" v-if="!item.logo" src="@/assets/img/nodata.png" alt />
          <div class="flex-grow flex flex-column justify-around">
            <div class="rem-32px text-cut-one">{{item.enterprise_title}}</div>
            <div class="rem-26px text-66 flex justify-between">
              <span class="span-50p">关注度: {{item.attention_num}}</span>
              <span class="span-50p">申请量: {{item.applay_num}}</span>
            </div>
            <div class="rem-26px text-66 flex justify-between">
              <span class="span-50p">{{item.vip}}</span>
              <span class="span-50p">品类: {{item.type_name}}</span>
            </div>
          </div>
        </div>
      </ul>
      <!-- 最新资讯 -->
      <ul class="tab_list" :style="topStyle" v-if="tabIndex == 1">
        <li
          v-for="(item, index) in list"
          :key="index"
          class="flex news_li w-100p"
          @click="to('/recruit/news', item.article_id)"
        >
          <img class="margin-r24" v-if="item.thumb" :src="item.thumb" alt />
          <img class="margin-r24" v-if="!item.thumb" src="@/assets/img/nodata.png" alt />
          <div class="flex-grow overflow-hidden">
            <div class="rem-32px text-cut-two text-content">{{item.article_title}}</div>
            <div class="flex justify-between news_li_s">
              <div
                class="rem-20px c-66 news_li_tip flex-two text-cut-one margin-r20"
              >{{item.enterprise_title}}</div>
              <div class="rem-20px c-66 flex-one text-cut-one">{{item.created_at.slice(0,10)}}</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <load @loadData="getData" :list="list" :total="total" :nodata="list.length<10?true:false"></load>

    <!-- 底部导航 -->
    <footerNav></footerNav>
  </div>
</template>

<script>
import footerNav from "@/components/footer";
import recommendList from "@/components/recommendlist";
import tab from "@/components/tab";
import load from "@/components/load";
export default {
  components: {
    recommendList,
    tab,
    load,
    footerNav
  },
  data() {
    return {
      searchTit: "滤清器",
      tabList: ["企业名片", "最新资讯"],
      tabIndex: 0,
      recommendList: [],
      list: [],
      total: 0,
      topStyle: {}
    };
  },
  mounted() {
    this.searchTit = this.$route.query.value;
    this.getData(1);
    document.addEventListener("scroll", this.down, false);
  },
  beforeDestroy() {
    document.removeEventListener("scroll", this.down, false);
  },
  methods: {
    down() {
      let scrollTop =
        document.documentElement.scrollTop ||
        window.pageYOffset ||
        document.body.scrollTop; // 滚动的距离
      if (scrollTop > this.$refs.tabList.offsetTop) {
        this.topStyle;
      } else {
        this.topStyle;
      }
    },
    getList(e) {
      this.tabIndex = e;
      this.list = [];
      this.getData(1);
    },
    getData(page) {
      this.$axios.post( "/wap/index/result", {
        token: window.localStorage.getItem("token")
          ? window.localStorage.getItem("token")
          : "",
        search_title: this.searchTit,
        type: this.tabIndex + 1,
        page: page
      }).then(res => {
        if (this.recommendList.length == 0) {
          for (let i in res.data.data.ad) {
            this.recommendList.push(res.data.data.ad[i]);
          }
        }
        if (res.data.data.data.length == 0) {
          this.total++;
          return false;
        }
        for (let i in res.data.data.data) {
          this.list.push(res.data.data.data[i]);
        }
      });
    },
    to(path, id) {
      this.$router.push({
        path: path,
        query: {
          id: id
        }
      })
    }
  }
};
</script>

<style scoped>
.bgfff {
  background-color: #fff;
  padding: 0.3rem 0.2rem;
}
/* 搜索头部 */
.sea_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.2rem;
}
.sea_top p {
  flex: 1;
  margin-left: 1em;
  line-height: 2em;
  font-size: 0.28rem;
  color: #999;
  text-align: center;
  background-color: #ededed;
  border-radius: 4px;
}
.sea_top span {
  color: #ff0000;
}
/* 企业名片 */
.tab_list {
  background-color: #fff;
  padding: 0.1rem 0.2rem 0.3rem 0.2rem;
}
.tab_list li {
  border-bottom: 1px solid #ededed;
  padding: 0.2rem 0;
}
.tab_list li:last-child {
  border-bottom: none;
}
/* .tab_list .cen {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tab_list .cen img {
  display: block;
  width: 2.28rem;
  height: 1.73rem;
}
.tab_list .tit {
  margin-left: 0.2rem;
  flex: 1;
}
.tab_list .tit p {
  font-size: 0.32rem;
  color: #333333;
  margin-bottom: 0.6em;
  line-height: 1.5em;
}
.tab_list .tit dl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #656565;
  font-size: 0.26rem;
  line-height: 1.5em;
}
.tab_list .tit dd.gray {
  background-color: #ececec;
  padding: 2px 3px;
  border-radius: 4px;
} */
.news_li {
  border-bottom: 1px solid #e9e9e9;
  padding: 0.2rem 0;
}

.news_li:last-of-type {
  border-bottom: none;
}

.news_li img {
  min-width: 2.27rem;
  max-width: 2.27rem;
  height: 1.72rem;
  border-radius: 5px;
  object-fit: contain;
}

.news_li_s {
  margin-top: 0.1rem;
  height: 0.42rem;
  line-height: 0.42rem;
}

.news_li_tip {
  padding: 0 0.12rem;
  background: #f2f2f2;
  border-radius: 0.05rem;
}

.list .van-icon {
  color: #666;
  font-size: 0.4rem;
}
.list_li {
  padding: 0.26rem 0;
}
.list_li .icon-huoyan {
  color: rgb(223, 18, 38);
  margin-right: 0.14rem;
}
.list_li > img {
  width: 2.28rem;
  height: 1.74rem;
  object-fit: contain;
}
.list_li:last-of-type {
  border: none;
}
</style>
